import React from 'react';
import { Layout, Menu, Icon } from 'antd';
import { NavLink, withRouter } from 'react-router-dom';

const { Sider } = Layout;

export default function siderWrapper(items) {
  const defaultSelectedKeys = items.length > 0 ? [items[0].path] : ['/'];
  return withRouter(({ location }) => (
    <Sider width={200} style={{ background: '#fff' }}>
      <Menu
        defaultSelectedKeys={defaultSelectedKeys}
        selectedKeys={[location.pathname]}
        mode="inline"
        style={{ height: '100%', borderRight: 0 }}
      >
        {items.map((item) => (
          <Menu.Item key={item.path}>
            <NavLink to={item.path}>
              <Icon type={item.iconType} />
              {item.text}
            </NavLink>
          </Menu.Item>
        ))}
      </Menu>
    </Sider>
  ));
}
